<template>
  <el-table-column :prop="prop" v-bind="$attrs" className="tree-table--node">
    <template slot-scope="scope">
      <span><span class="tree-table--leaf" v-show="!hasChild(scope.row)">◎</span>{{ scope.row[prop] }}</span>
    </template>
  </el-table-column>
</template>

<style>
.tree-table--leaf {
  margin-left: 7px;
  margin-right: 7px;
}
.tree-table--node span,
div {
  vertical-align: middle;
}
.tree-table--node .el-table__placeholder {
  display: none;
}
</style>

<script>
import isArray from 'lodash/isArray'
export default {
  name: 'table-tree-column',
  props: {
    prop: {
      type: String
    },
    treeKey: {
      type: String,
      default: 'id'
    },
    parentKey: {
      type: String,
      default: 'pid'
    },
    childKey: {
      type: String,
      default: 'children'
    },
    hasChildren: {
      type: String,
      default: 'hasChildren'
    }
  },
  methods: {
    hasChild (row) {
      let result = false
      if (row[this.hasChildren]) {
        result = true
      } else {
        result = (isArray(row[this.childKey]) && row[this.childKey].length >= 1) || false
      }
      return result
    }
  }
}
</script>
